<template>
	<w-layout showNavbar navTitle="精气一番赏" :navTitleColor="publicStyles['--color-t1']" background="url('/static/image/bk.png') no-repeat"
		navBackgroundColor="transparent" :scrollTop="page.scrollTop" :navScrollColor="publicStyles['--color-bk']">
		<template #navRight>
			<view @click="popup.showRule = true" class="">
				规则
			</view>
		</template>
		<template #default>
			<view class="container">
				<view class="public-box-9 px-50 py-50 mb-50 mt-30" style="min-height: 440rpx;">
					<view class="fr u-border-bottom pb-40" style="border-color: var(--gray-line) !important;">
						<cut-corner :arrow="2" clipSize="30rpx">
							<view class="" style="position: relative;">
								<image style="width: 176rpx;height: 176rpx;" :src="state.goods.imgurl_detail" mode=""></image>
								<view class="fs-24 px-18 py-4" style="position: absolute;bottom: 0;right: 0;z-index:88;background: rgba(0,0,0,0.7);">
									第{{state.goods.num}}/{{state.goods.stock}}箱
								</view>
							</view>
						</cut-corner>
						<view class="ml-30 flex-1">
							<view class="">
								{{state.goods.title}} 一番赏
							</view>
							<view class="color mt-10">
								¥{{state.goods.price}}
							</view>
							<view class="w-100 mt-20">
								<cut-corner :arrow="3" clipSize="6rpx" width="100%" height="100%">
								<cut-corner :arrow="1" clipSize="6rpx" width="100%" height="100%">
								<view class="px-2 py-2 w-100 h-100" style="background-color: #66E9FF;height: 30rpx;">
									<cut-corner :arrow="3" clipSize="6rpx" width="100%" height="100%">
									<cut-corner :arrow="1" clipSize="6rpx" width="100%" height="100%">
									<view class="px-6 py-6 w-100 h-100" style="background-color: #1C4C5A;">
										<cut-corner :arrow="3" clipSize="4rpx" width="100%" height="100%">
										<cut-corner :arrow="1" clipSize="4rpx" width="100%" height="100%">
										<view :style="{width:`${state.goods.goodslist_surplus_stock/state.goods.goodslist_stock*100}%`}" class="h-100 transition" style="background-color: #66E9FF;">
											
										</view>
										</cut-corner>
										</cut-corner>
									</view>
									</cut-corner>
									</cut-corner>
								</view>
								</cut-corner>
								</cut-corner>
							</view>
							
							<view class="mt-15 fs-24">
								<text class="op-70">赏品剩余</text>
								<text class="color">{{state.goods.goodslist_surplus_stock}}/{{state.goods.goodslist_stock}}</text>
							</view>
						</view>
						
						
					</view>
					<view class="fr-ac mt-40">
						<view @click="replaceBox" class="public-btn-6 color px-42 py-12">
							换箱
						</view>
						<image class="ml-auto" style="width: 24rpx;height: 24rpx;" src="/static/icon/public/left-fill.png" mode="widthFix"></image>
						<view @click="boxChange(-1)" class="color ml-5">
							上一箱
						</view>
						<view @click="boxChange(1)" class="color ml-50">
							下一箱
						</view>
						<image class="ml-5" style="width: 24rpx;height: 24rpx;" src="/static/icon/public/right-fill.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="fr-ac">
					<view class="">
						<up-tabs
							@change="tabChange"
							:list="tabs.list" 
							:current="tabs.current"
							lineWidth="14"
							lineHeight="14"
							:lineColor="`url('/static/icon/public/top-fill.png') 100% 100%`"
							:activeStyle="{
								color: publicStyles['--color'],
								fontWeight: 'bold',
								transform: 'scale(1.2)'
							}"
							itemStyle="height: 60px;"
							:inactiveStyle="{
								'font-size': '32rpx',
							}"
						>
						</up-tabs>
					</view>
					
					<view @click="setStar" class="ml-auto fr-ac">
						<view class="">
							<image v-if="state.goods.collection_is == 1" style="width: 32rpx;height: 32rpx;" src="/static/icon/public/star-fill.png" mode=""></image>
							<image v-else style="width: 32rpx;height: 32rpx;" src="/static/icon/public/star.png" mode=""></image>
						</view>
						<view class="ml-10 op-70 fs-32">
							收藏
						</view>
					</view>
				</view>
				
				<!-- 赏品预览 -->
				<template v-if="tabs.current == 0">
					<view class="gap-30 mt-40" style="display: grid;grid-template-columns: repeat(2,1fr);">
						<view @click="openCardPopup(item)" class="public-card-5 fc px-30 py-30" style="min-height: 450rpx;position: relative;" v-for="(item,index) in state.goodslist" :key="index">
							<cut-corner :arrow="2" clipSize="30rpx" width="100%">
								<view class="" style="position: relative;">
									<image style="width: 100%;height: 250rpx;" :src="item.imgurl" mode="widthFix"></image>
									<view class="" style="position: absolute;bottom: 0;right: 0;z-index: 88;">
										<view class="" style="position: relative;">
											<view class="fs-24 px-18 py-4" style="position: absolute;bottom: 0;right: 0;z-index:88;background: rgba(0,0,0,0.7);">
												{{item.surplus_stock}}/{{item.stock}}
											</view>
										</view>
									</view>
									<view v-if="item.surplus_stock == 0" class="zhezhao fr-ac-jc">已售罄</view>
								</view>
							</cut-corner>
							<view class="mt-30 fs-24 ellipsis-2" style="line-height: 1.6;">
								{{item.title}}
							</view>
							<view class="fr-ac mt-20">
								<!-- <view class="op-50 fs-24">
									概率 1.63%
								</view> -->
								<view class="color fs-32 ml-auto">
									¥{{item.sc_money}}
								</view>
							</view>
							<view class="" style="position: absolute;top: 0;left: 0;z-index: 88;">
								<cut-corner :arrow="3" clipSize="12rpx">
								<view class="px-20 py-10 fs-24" style="background-color: var(--color);color: #002C33;">
									{{item.shang_title}}
								</view>
								</cut-corner>
							</view>
							
						</view>
					</view>
				</template>
				
				<!-- 中赏详情 -->
				<template v-if="tabs.current == 1">
					<view class="mt-40 u-border-bottom pb-30 fr-ac" style="border-color: var(--gray-line) !important;" v-for="(item,index) in state.list" :key="index">
						<view class="color bold mr-30">
							{{index+1}}
						</view>
						<view class="" style="position: relative;">
							<image style="width: 80rpx;height: 80rpx;border-radius: 50%;" :src="item.user_info.headimg" mode=""></image>
							<image v-if="item.user_info.vip_imgurl" style="width: 80rpx;height: 80rpx;border-radius: 50%;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);" :src="item.user_info.vip_imgurl" mode="widthFix"></image>
						</view>
						<view class="w-28 mx-20">
							<view class="ellipsis-1 op-90">
								{{item.user_info.nickname}}
							</view>
						</view>
						<view class="flex-1 ml-10 fr-ac">
							<image style="width: 80rpx;height: 80rpx;" :src="item.goodslist_imgurl" mode="widthFix"></image>
							<view class="ml-15 flex-1">
								<view class="ellipsis-1 op-90">
									{{item.goodslist_title}}
								</view>
								<!-- <view class="color mt-10">
									¥ 199.00
								</view> -->
							</view>
							<view class="ml-auto">
								<cut-corner :arrow="3" clipSize="8rpx">
									<view class="color fr-ac-jc fs-26" style="width: 54rpx;height: 50rpx;background-color: #153E4C;">
										x{{item.prize_num}}
									</view>
								</cut-corner>
							</view>
						</view>
					</view>
				</template>
				<no-more :show="state.list.length == 0"></no-more>
				
				<fixed-bottom>
					<template #default>
						<view class="px-40 w-100 h-100 fr-ac-jsb">
							<!-- <view class="public-btn-8 fr-jc color" style="width: 144rpx;height: 76rpx;line-height: 60rpx;">
								<view class="text-color-b">
									ALL
								</view>
							</view> -->
							<view @click="openPaymentPopup(1)" class="public-btn-8 fr-jc color" style="width: 144rpx;height: 76rpx;line-height: 60rpx;">
								<view class="text-color-b">
									一发
								</view>
							</view>
							<view @click="openPaymentPopup(3)" class="public-btn-8 fr-jc color" style="width: 144rpx;height: 76rpx;line-height: 60rpx;">
								<view class="text-color-b">
									三发
								</view>
							</view>
							<view @click="openPaymentPopup(5)" class="public-btn-8 fr-jc color" style="width: 144rpx;height: 76rpx;line-height: 60rpx;">
								<view class="text-color-b">
									五发
								</view>
							</view>
						</view>
					</template>
				</fixed-bottom>
				
				<popup-good-card 
					:show="CardPopup.show"
					:title="CardPopup.title"
					:name="CardPopup.name"
					:src="CardPopup.src"
					:price="CardPopup.price"
					@close="CardPopup.show = false"
				></popup-good-card>
				
				<up-popup :show="popup.showRule" @close="popup.showRule = false" mode="center" :safeAreaInsetBottom="false" bgColor="transparent">
					<view class="public-popup-2 px-50 py-20 fc" style="width: 670rpx;min-height: 760rpx;position: relative;">
						<view class="fs-36">
							规则说明
						</view>
						<view class="mt-80" style="max-height: 400rpx;overflow: scroll;line-height: 1.8;">
							<view class="">
								<up-parse :content="state.rule"></up-parse>
							</view>
						</view>
						<view @click="popup.showRule = false;" class="public-btn-3 transition py-25 t-c mt-auto mb-60">
							<view class="text-color-b fs-32">
								确认
							</view>
						</view>
					</view>
				</up-popup>
				
				<up-popup :show="popup.showObtain" @close="popup.showObtain = false" mode="center" :safeAreaInsetBottom="false" bgColor="transparent">
					<view class="public-popup-4 px-50 py-20 fc" style="width: 670rpx;min-height: 900rpx;position: relative;">
						<view class="fs-36">
							恭喜获得
						</view>
						<view class="mt-80 fc-ac">
							<view class="public-cover-2 t-c fs-36" style="width: 360rpx;height: 70rpx;">
							</view>
							
							<view v-if="state.obtain_list && state.obtain_list.length==1" class="fc-ac">
								<view class="mt-80 w-fit" style="position: relative;">
									<cut-corner :arrow="2" clipSize="26rpx">
										<image style="width: 250rpx;height: 250rpx;" :src="state.obtain_list[0].goodslist_imgurl" mode=""></image>
									</cut-corner>
									<view class="" style="position: absolute;top: 0;left: 0;z-index: 88;">
										<cut-corner :arrow="3" clipSize="8rpx">
										<view class="px-8 py-2 fs-24" style="background-color: var(--color);color: #002C33;">
											{{state.obtain_list[0].shang_title}}
										</view>
										</cut-corner>
									</view>
									<view class="px-10 fs-24" style="position: absolute;bottom: 0;right: 0;z-index: 88;background: rgba(0,0,0,0.5);">
										x1
									</view>
								</view>
								<view class="mt-40 t-c">
									{{state.obtain_list[0].goodslist_title}}
								</view>
								<view class="fs-24 mt-15 op-50 t-c">
									价值：{{state.obtain_list[0].goodslist_money}} 精粹
								</view>
							</view>
							<view v-if="state.obtain_list && state.obtain_list.length>1" class="my-40 gap-40" style="display: grid;grid-template-columns: repeat(3,1fr);">
								<view class="" v-for="(item,index) in state.obtain_list" :key="index">
									<view class="" style="position: relative;">
										<cut-corner :arrow="2" clipSize="26rpx">
											<image style="width: 170rpx;height: 170rpx;" :src="item.goodslist_imgurl" mode=""></image>
										</cut-corner>
										<view class="" style="position: absolute;top: 0;left: 0;z-index: 88;">
											<cut-corner :arrow="3" clipSize="8rpx">
											<view class="px-8 py-2 fs-24" style="background-color: var(--color);color: #002C33;">
												{{item.shang_title}}
											</view>
											</cut-corner>
										</view>
										<view class="px-10 fs-24" style="position: absolute;bottom: 0;right: 0;z-index: 88;background: rgba(0,0,0,0.5);">
											x{{item.prize_num}}
										</view>
									</view>
									<view class="mt-40 t-c ellipsis-1">
										{{item.goodslist_title}}
									</view>
									<view class="fs-24 mt-15 op-50 t-c">
										价值：{{item.goodslist_money}} 精粹
									</view>
								</view>
							</view>
						</view>
						<view class="fr-ac-jsb gap-30 mt-auto">
							<view @click="openPaymentPopup(PaymentPopup.goods_num);popup.showObtain = false;" class="public-btn-9 flex-1 transition py-25 t-c mb-60">
								<view class="text-color-b fs-32">
									重抽
								</view>
							</view>
							<view @click="$u.route('/pages/warehouse/index')" class="public-btn-9 flex-1 transition py-25 t-c mb-60">
								<view class="text-color-b fs-32">
									去盒柜
								</view>
							</view>
							<view @click="popup.showObtain = false;" class="public-btn-9 flex-1 transition py-25 t-c mb-60">
								<view class="text-color-b fs-32">
									确定
								</view>
							</view>
						</view>
						
					</view>
				</up-popup>
				
				
				<!-- 支付 -->
				<payment
					:show="PaymentPopup.show" 
					type="yuanqi"
					:goods_id="PaymentPopup.goods_id"
					:goods_num="PaymentPopup.goods_num"
					:goods_num_type="PaymentPopup.goods_num_type"
					@callback="callback"
					@close="closePaymentPopup"
				></payment>
				
			</view>
		</template>
	</w-layout>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		computed,
		nextTick
	} from 'vue'
	import {
		storeToRefs
	} from 'pinia'
	import {
		onLoad, onPageScroll,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		useAppStore
	} from '@/store/app'
	import {
		useColorStore
	} from '@/store/color'
	import {
		get_parse,
		goodsdetail,
		shang_log,
		addCollect,
		delCollect,
		infinite_prizeorderlog
	} from '@/utils/request/api';
	import {
		useUserStore
	} from '@/store/user'
	const userStore = useUserStore()
	const appStore = useAppStore()
	const colorStore = useColorStore()
	const {
		publicStyles
	} = storeToRefs(colorStore)
	onLoad(async(options) => {
		get_parseApi()
		if(options.num){
			state.goods_num = options.num
		}
		if(options.id){
			state.goods_id = options.id
			loadData()
		}
	})
	onMounted(() => {
		appStore.loadingHandler(false)
	})
	onPageScroll((e)=>{
		page.scrollTop = e.scrollTop
	})
	onReachBottom(()=>{
		if(state.last_limit == state.limit){
			state.page++
			loadData()
		}
	})
	
	async function get_parseApi(){
		get_parse({type:12}).then(res=>{
			state.rule = res
		})
	}
	
	const page = reactive({
		scrollTop:0
	})
	
	const tabs = reactive({
		current:0,
		list:[
			{
				id:'',
				name:'赏品预览',
			},
			{
				id:'',
				name:'中赏详情',
			}
		]
	})
	function tabChange(e){
		tabs.current = e.index
		console.log(tabs.current)
		initData()
		loadData()
	}
	
	const state = reactive({
		goods_id: '',
		goods_num: 0,
		goodslist: [],
		
		list:[],
		page:1,
		limit:20,
		last_limit:20,
		
		keyword:'',
		rule: '',
		
		goods: {},
		
		obtain_list: [],
	})
	function initData(){
		state.list = []
		state.page = 1
		state.last_limit = 20
	}
	function loadData(){
		switch (tabs.current){
			case 0:
				get_goodsdetail()
				break;
			case 1:
				get_shang_log()
				break;
			default:
				break;
		}
	}
	
	const popup = reactive({
		showRule:false,
		showObtain:false,
	})
	
	function replaceBox(){
		uni.navigateTo({
			url:`/pages/yuanqi_shang/replace?id=${state.goods.id}`,
			events: {
				chooseBox: function(data) {
					console.log(data);
					state.goods_num = data.num
					initData()
					loadData()
				}
			}
		})
	}
	
	// 概览
	async function get_goodsdetail(){
		const res = await goodsdetail({
			goods_id: state.goods_id,
			goods_num: state.goods_num
		})
		state.goods_num = res.goods.num
		state.goods = res.goods
		state.goodslist = res.goodslist
	}
	// 中赏记录
	async function get_shang_log(){
		const res = await shang_log({
			goods_id: state.goods_id,
			goods_num: state.goods_num,
			shang_id: 0,
			page: state.page
		})
		state.last_limit = res.data.length
		state.list = state.list.concat(res.data)
	}
	
	// 上下一箱
	async function boxChange(num){
		state.goods_num = state.goods.num + num
		console.log(state.goods_num,'111')
		if(state.goods_num < 1){
			state.goods_num = state.goods.stock
		}
		if(state.goods_num > state.goods.stock){
			state.goods_num = 1
		}
		initData()
		await get_goodsdetail()
		get_shang_log()
	}
	
	// 收藏
	async function setStar(){
		if(state.goods.collection_is == 1) {
			const res = await delCollect({
				id: state.goods.collection_id
			})
			uni.$u.toast('取消收藏成功')
		}else{
			const res = await addCollect({
				goods_id: state.goods.id,
				goods_num: state.goods.num,
			})
			uni.$u.toast('收藏成功')
		}
		state.goods.collection_is = state.goods.collection_is == 1? 0:1
	}
	
	
	const CardPopup = reactive({
		show: false,
		title: '赏品详情',
		name: '',
		src: '',
		price: '',
	})
	function openCardPopup(item){
		CardPopup.show = true
		CardPopup.name = item.title
		CardPopup.src = item.imgurl
		CardPopup.price = `参考价格 ¥${item.sc_money}`
	}
	
	// 支付组件
	const PaymentPopup = reactive({
		show: false,
		goods_id: '',
		goods_num: '',
		goods_num_type: '',
	})
	async function openPaymentPopup(num){
		PaymentPopup.goods_id = state.goods_id
		PaymentPopup.goods_num = num
		PaymentPopup.goods_num_type = state.goods_num
		PaymentPopup.show = true
	}
	function closePaymentPopup(num){
		PaymentPopup.show = false
	}
	// 支付回调
	async function callback(order_num){
		closePaymentPopup()
		const res = await infinite_prizeorderlog({
			order_num
		})
		state.obtain_list = res.data
		initData()
		await get_goodsdetail()
		get_shang_log()
		popup.showObtain = true
	}
	
</script>

<style lang="scss">
	.shadow {
		box-shadow: 2rpx 2rpx 12rpx var(--shadow);
	}
	.color{
		color: var(--color);
	}

	.container {
		width: 100%;
		min-height: 100%;
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		padding: 0 30rpx;
		
	}
	
	.zhezhao {
		position: absolute;
		top: 0;
		left: 0%;
		right: 0;
		bottom: 0;
		margin: auto;
		width: 100%;
		height: 100%;
		background: #000000;
		opacity: 0.5;
		z-index: 10;
		text-align: center;
		font-size: 32rpx;
		color: #FFFFFF;
		font-style: normal;
		text-transform: none;
	}
</style>